<template>
	<div class="changeCoins" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="兑换金币"></back-header>
		<div class="changeCoins-warp">
			<section class="caption" id="htmlDataList">
				<label class="item flex" v-for="item in exchangeList">
					<img :src="item.cover" width="50px;" heoght="50px;">
					<div class="info">
						<p class="name elip">{{item.title}}</p>
						<p class="num elip">x{{item.num}}</p>
					</div>
					<span class="align-left "><img class="icon-balance" src="../assets/images/chongbianniu.png"><span>{{item.to_user_price}}</span></span>
				</label>
			</section>
			<p class="msg" style="text-align: center;font-size:14px;color:red;height:20px;">{{msg}}</p>
			<button type="button" class="btn btn-yellow" id="button" @click="exchange()">兑换金币(共{{moneyAll}})</button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import backHeader from '../components/backHeader'
	export default{
		name:"changeCoins",
		components:{backHeader},
		data(){
			return {
				exchangeList:[],
				back_ids:[],
				moneyAll:0,
				msg:""
			}
		},
		mounted(){
			this.exchangeList = this.$store.state.backpack;
			for(let i=0;i<this.exchangeList.length;i++){
				this.back_ids.push(this.exchangeList[i]['backpack_id'])
			}
			let toy_ids=[];
			let toys = [];
			for(let i=0;i<this.exchangeList.length;i++){
				this.moneyAll = parseInt(this.moneyAll)+parseInt(this.exchangeList[i]['to_user_price']);
				if(toy_ids.indexOf(this.exchangeList[i]['toy_id']) >= 0){
					for(let j=0;j<toys.length;j++){
							if(toys[j]["toy_id"]==this.exchangeList[i]['toy_id']){
								toys[j]["num"]=parseInt(toys[j]["num"])+1;
								toys[j]["to_user_price"]=parseInt(toys[j]["to_user_price"])+parseInt(this.exchangeList[i]["to_user_price"]);
							}
						}
				}else{
					this.exchangeList[i]['num'] = 1;
					toys.push(this.exchangeList[i]);
					toy_ids.push(this.exchangeList[i]['toy_id']);
				}
			}
			this.exchangeList = toys;
		},
		methods:{
			exchange(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/backpackExchange`,{toy_ids:this.back_ids,token:this.$store.state.userInfo.token}).then((response) => {
		              console.log(response)
		              if(response.code == '0'){
		              	this.msg = "兑换成功";
		              	setTimeout(() => {
		              		this.$router.go(-1);
		              	},1000)
		              }else{
		              	this.msg = response.msg;
		              }
		  		})
			}
		}
	}
</script>

<style lang="less" scoped>
	.changeCoins-warp{
		width:100%;
		background:#fff;
	}
	.caption{
		width:95%;
		margin:0 auto;
	}
	.caption .item {
	    padding: 10px 0;
	    border-bottom: 1px solid #f2f2f2;
	    font-size: 14px;
	    img {
		    width:55px;
		    border-radius: 5px;
		    margin-right:10px;
		}
		.info {
		    width:150px;
		}
		.name {
		    width: 100%;
		    color: #555;
		    font-size: 14px;
		    line-height: 2
		}
		.num {
		    width: 100%;
		    color: #9b9b9b;
		    font-size: .12rem;
		    line-height: 2
		}
		.icon-balance {
		    width: 18px;
		    vertical-align: middle;
		    margin-top: -2px;
		    margin-right: 5

		}
	}
	

</style>